<template>
  <component :is="currentTab" />
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, onActivated } from "vue";
  import AdminIndexLayout from './layouts/adminIndexLayout.vue';
  import DefaultLayout from './layouts/defaultLayout.vue';
  import AdminLayout from "./layouts/adminLayout.vue";
  
  export default defineComponent({
    name: 'App',
    components: { AdminIndexLayout, DefaultLayout, AdminLayout },
    data() {
      return {
        currentTab: "",
        rightScrollHeight: ''
      }
    },
    methods: {
      setLayout: function (toUri: string) {
        if (toUri.startsWith('/player')) {
          this.currentTab = 'AdminIndexLayout';
        } else {
          this.currentTab = 'AdminLayout';
        }
      }
    },
    watch: {
      $route(to:any, from: any) {
        const toUri = to.path
        this.setLayout(toUri)
      }
    },
    mounted() {

    }
  });
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }

  body {
    margin:0;
  }

  :root {
  --el-menu-item-height: 40px;
  --el-menu-sub-item-height: 40px;
  --el-menu-hover-bg-color: red;
  --el-transition-duration: 0.1
}
</style>
